<template>
  <div class="home">
    <canvas width="300" height="320" ref="canvas"></canvas>
  </div>
</template>

<script>
import { GamePlay } from "@/gamePlay";

export default {
  data() {
    return {}
  },
  mounted() {
    const gamePlay = new GamePlay(this.$refs.canvas);
    gamePlay.play();
    window.gamePlay = gamePlay;
  },
  methods: {
  }
}
</script>

<style scoped>
.home {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: black;
}

canvas {
  width: 500px;
  max-width: 100%;
  margin: 0 auto;
  border-radius: 5px;
  border: 1px dashed gray;
}
</style>
